<template>
  <view>
    <s-layout title="附近门店" navbar="custom1" :onShareAppMessage="shareInfo">
      <assNavbar title="附近门店" :messageTitleShow="false">
        <template #center>
          <view class="w-100 search ss-flex ss-row-center ss-p-r-50 ss-p-r-16">
            <view class="w-100 ss-flex-1 right ss-flex  ss-row-between ss-r-50 ss-m-r-10">
              <view class="search-view ss-flex ss-row-left">
                <uni-icons class="search-icon" type="search" color="#E4E4E4" size="20"></uni-icons>
                <input class="my-input" :inputBorder="false" v-model="search" placeholder="搜索" />
              </view>
              <view class="search_btn" @click="onSearch">搜索</view>
            </view>
          </view>
        </template>
      </assNavbar>

      <!-- <c-search activeColor="#F46800" @change="searchChange" /> -->
      <view class="shopinfo">
        <div class="left">
          <image mode="aspectFit"
            :src="sheep.$url.cdn(shopInfo.thumb||'/storage/storelevel/20250410/54cf8f23d18011b35a5d21159bfb31f9.png')">
          </image>
          <div class="content">
            <div class="title">{{ textLenght(shopInfo.name)}}
              <image mode="widthFix" class="posi" v-if="shopInfo.grade == 'gold'"
                :src="sheep.$url.cdn('/storage/default/20250408/adc153bf0abc8403c53e1dfa464fda54.png')"></image>
              <image mode="widthFix" class="posi" v-if="shopInfo.grade == 'diamond'"
                src="https://xyh-static-app.oss-cn-hangzhou.aliyuncs.com/storage/storelevel/20250408/bf04923b33c15b9483999d5ca079893f.png">
              </image>
              <image mode="widthFix" class="posi" v-if="shopInfo.grade == 'starshine'"
                src="https://xyh-static-app.oss-cn-hangzhou.aliyuncs.com/storage/storelevel/20250408/c43f9416612f9968211e079c1abcbc5b.png">
              </image>
              <image mode="widthFix" class="posi" v-if="shopInfo.grade == 'honor'"
                src="https://xyh-static-app.oss-cn-hangzhou.aliyuncs.com/storage/storelevel/20250408/b663a9567beb34aa7e469beec7c1ce72.png">
              </image>

            </div>


            <view class="rank">
              <uni-rate :touchable="false" :value="shopInfo.mark == null || shopInfo.mark == '' ? 0 : shopInfo.mark"
                :readonly="true" size="14" />{{
                  shopInfo.mark == "" || shopInfo.mark == null || shopInfo.mark == '' ? '0' : shopInfo.mark }}.0
            </view>
          </div>
        </div>
        <div class="right">
          <view  v-if="shopInfo.my_shop == 1"  class="posiss ss-flex">
			  <view class="goodselect" @click="gotoSelectGoods()">
			    选品带货
			  </view>
			  <button class="ss-reset-button task-item-share-2 ss-flex justify-center align-center"
			    @click="sheep.$router.go('/pages/store/setting')">
			    <image class="task-item-share-1-image"
			      :src="sheep.$url.cdn('/static/icon/setting.png')"
			      mode="widthFix"></image>
			  </button>
            <button open-type="share" class="ss-reset-button task-item-share-2 ss-flex justify-center align-center"
              @click="share(item)">
              <view class="shares">
                <image class="task-item-share-2-image"
                  :src="sheep.$url.cdn('/static/icon/share1.png')"
                  mode="widthFix"></image>
              </view>
            </button>
          </view>
        </div>
      </view>
      <div class="priceTabs" v-if="shopInfo.one_shop == 1">
        <div :class="['item', { active: index == priceIndex }]" v-for="(item, index) in priceTabs" :key="index"
          @click="changePriceIndex(index, item)">
          {{ item.text }}
        </div>
      </div>
      <!-- 商品列表 -->
      <view class="goodsList" v-if="goodsList.length > 0">
        <view class="goods-item" v-for="(item, index) in goodsList" :key="index" @click="goodsClick(item)">
          <image class="goods-img" :src="sheep.$url.cdn(item.image)"></image>
          <view class="goods-title">{{ item.title }}</view>
          <view class="goods-desc">
            <view class="desc">¥{{ item.price[0] }}</view>
            <view class="share-sales">
              <view class="sales">已售{{ item.sales }}件</view>
              <button open-type="share"
                class=" share ss-reset-button task-item-share-2 ss-flex justify-center align-center"
                @tap.stop="share(item)">
                <image class="share-img" :src="sheep.$url.cdn('/static/img/share-forward-fill.png')"></image>
              </button>
              <!-- <view class="share" @tap.stop="shares(item)">
                <image class="share-img" :src="sheep.$url.cdn('/static/img/share-forward-fill.png')"></image>
              </view> -->
            </view>
          </view>
        </view>
        <view class="blank">我也是有底线的</view>
      </view>
      <view class="nogoods" v-if="goodsList.length == 0">
        暂无商品
      </view>
	
	<!-- 领券弹窗 -->
	<coupon-popup :couponData="state.couponData" @close="state.show_couponPop=false" :show="state.show_couponPop" />
    </s-layout>
  </view>
</template>

<script setup>
//附近门店列表页
import {
  computed,
  reactive,
  onBeforeMount,
  ref
} from 'vue';
import {
  onLoad,
  onShow,
} from '@dcloudio/uni-app';
import sheep from '@/sheep';
import merchantApi from '@/sheep/api/merchant'
import _ from 'lodash'
import {
  isEmpty
} from 'lodash';
import assNavbar from '@/components/ass-navbar.vue'
import couponPopup from './components/coupon-popup.vue';
import { showShareModal } from '@/sheep/hooks/useModal';
const userInfos = ref({})
const shareInfo = computed(() => {
  if (isEmpty(state.item)) return {};
  if (shareType.value == 0) {
    return {
      title: state.item.desc,
      path: `/pages/store/shop?id=${state.item.id}&taskUserId=${userInfos.value.id}&price=${state.item.buy_amount}`,
      image: ""
    }
  }
  else {
    return sheep.$platform.share.getShareInfo(
      {
        title: state.item.title,
        image: sheep.$url.cdn(state.item.image),
        desc: state.item.subtitle,
        params: {
          page: '2',
          query: state.item.id,
        },
      },
      {
        id: state.item.id,
        type: 'goods', // 商品海报
        title: state.item.title, // 商品标题
        image: sheep.$url.cdn(state.item.image), // 商品主图
        price: state.item.price[0], // 商品价格
        original_price: state.item.original_price, // 商品原价
      },
    );
  }

});
const shareType = ref(0)
const share = () => {
  shareType.value = 0
  state.item = JSON.parse(uni.getStorageSync('shopInfo'))
}
const priceTabs = ref([
  {
    value: 1050,
    text: "1050元套餐"
  },
  {
    value: 1680,
    text: "1680元套餐"
  }
])
const priceIndex = ref(0)
const priceVlaue = ref(50)
const changePriceIndex = (i, txt) => {
  priceIndex.value = i
  priceVlaue.value = txt.value
  getList()
}
const shares = (item) => {
  shareType.value = 1
  state.item = item
  showShareModal(shareInfo.value)
}

const search = ref('')
const shopId = ref(0)
const goodsList = ref([
])
const shopStatus = ref(0)
// 获取店铺信息
const shopInfo = ref({})
const getShopInfo = async () => {

  const data = await sheep.$api.store.getStoreInfo({
    id: shopId.value
  })
  shopInfo.value = data.data

}
function goodsClick(item) {
  setUpUsers()
  uni.navigateTo({
    url: `/pages/goods/index?id=${item.id}&taskUserId=${state.taskUserId ? state.taskUserId : '1'}`
  })
}
// 判断字符的长度
const textLenght = (text)=>{
	const maxLength = 7;
	if(text?.length > maxLength){
		const firstPart = Math.floor(6);
		// const lastPart = Math.ceil(maxLength / 2);
		text = text.substring(0, firstPart) + '...';
	}
	return text
}

const state = reactive({
  loadStatus: 'more',
  // 页数
  page: 0,
  list: [],
  search: {},
  activeId: '',
  showRegion: false,
  address: '',
  taskUserId: '',
  show_couponPop:false,
  couponData:{},
})






function searchChange(e) {
  console.log(e);

  state.search = e
  // console.log('searchChange',e)
  onSearch()
}






const onSearch = () => {

  getList();
}


// onReachBottom(() => {
//   getList();
// })



async function getList() {
  let data1 = {}
  if (shopInfo.value.one_shop == 1) {
    data1 = {
      'store_id': shopId.value,
      price: priceVlaue.value,
      keyword: search.value
    }
  }
  else {
    data1 = {
      'store_id': shopId.value,
      keyword: search.value

    }
  }

  const { data } = await sheep.$api.store.getStoreDetail(data1)

  goodsList.value = data

}

const gotoSelectGoods = () => {
  uni.navigateTo({
    url: '/pages/store/supplyshop?shopid=' + shopId.value
  })
}
const setUpUsers = async () => {
  if (JSON.parse(uni.getStorageSync('user-store')) !== '') {
    userInfos.value = JSON.parse(uni.getStorageSync('user-store')).userInfo
    if (uni.getStorageSync('taskUserId') !== "" && userInfos.value.id !== uni.getStorageSync('taskUserId')) {
      const data = {
        taskUserId: state.taskUserId
      }
      const res = sheep.$api.store.setUpUser(data)
      console.log(res, '设置上级');

    }
  }
  else {
    const data = {
      taskUserId: uni.getStorageSync('taskUserId')
    }
    const res = sheep.$api.store.setUpUser(data)
    console.log(res, '设置上级')
  }


}
onLoad(async (opt) => {
	if(opt.type=="coupon"){
		state.couponData = opt
		state.show_couponPop = true
	}
  if (opt.id !== undefined) {
    shopId.value = opt.id;
  }
  else {
    shopId.value = JSON.parse(uni.getStorageSync('shopInfo')).id
  }
  // 使用正确的条件判断语法
if (parseFloat(opt.price) < 80) {
  priceVlaue.value = 50;
} else if (parseFloat(opt.price) >= 80 && parseFloat(opt.price) < 1050) {
  priceVlaue.value = 80;
} else if (parseFloat(opt.price) >= 1050 && parseFloat(opt.price) < 1680) {
  priceVlaue.value = 1050;
} else if (parseFloat(opt.price) >= 1680) {
  priceVlaue.value = 1680;
}

  
  if (priceVlaue.value < 1050) {
    priceTabs.value = [
      // {
      //     value: 1,
      //     text: "其他商品"
      //   },
      {
        value: 50,
        text: "50元商品"
      },
      {
        value: 80,
        text: "80元商品"
      }
    ]
  }
  priceTabs.value.forEach((el, index) => {
    if (el.value == priceVlaue.value) {
      priceIndex.value = index
    }
  })
  if (opt.taskUserId) {
    state.taskUserId = opt.taskUserId
  }
  
  await getShopInfo()
  await getList();
  await setUpUsers()
})


</script>


<style lang="scss" scoped>
view {
  box-sizing: border-box;
}
.task-item-share-1-image{
	width: 60rpx !important;
	height: 60rpx !important;
}
.nogoods {
  text-align: center;
  font-size: 30rpx;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 400rpx auto;
}

.rank {
  display: flex;
  justify-content: start;
  align-items: center;
  color: #fba503;
  margin-top: 10rpx;
}

.detail-tabbar-item {
  width: 100rpx;
  position: absolute;
  right: 0;
  top: 0;
  text-align: center;

  .item-icon {
    width: 40rpx;
    height: 40rpx;
    margin-right: 0 !important;
  }

  .item-title {
    font-size: 20rpx;
    font-weight: 500;
    line-height: 20rpx;
    margin-top: 12rpx;
  }
}

.priceTabs {
  display: flex;
  justify-content: start;
  align-items: center;
  padding: 20rpx;
  margin-bottom: 20rpx;
  font-size: 26rpx;

  .item {

    width: 50%;
    text-align: center;
  }
}

.shopinfo {
  display: flex;
  justify-content: start;
  align-items: center;
  padding: 20rpx;
  width: 100%;
  position: relative;
  padding-top: 40rpx;
  padding-bottom: 10rpx;

  .left {
    display: flex;
    justify-content: start;
    align-items: center;
    min-width: 180rpx;

    .title {
      font-size: 30rpx;
      color: #333;
      // word-wrap: none;
      // overflow: hidden;
      // text-overflow: ellipsis;
      // white-space: nowrap;
    }

    image {
      width: 80rpx;
      height: 80rpx;
      margin-right: 20rpx;
    }

    .title {
      .posi {
        margin-bottom: -10rpx;
      }
    }
  }

  .right {
    display: flex;
    justify-content: space-between;
    align-items: start;
    height: 100%;

    image {
      width: 80rpx;
      margin-right: 20rpx;
    }



    .posiss {
      position: absolute;
      right: 30rpx;
      top: 48rpx;
    }

    .shares {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-content: center;
      font-size: 28rpx;
      color: #DC2B2B;

      image {
        width: 45rpx;
        margin-left: 10rpx;
      }
    }

  }
}

.uni-input-placeholder {
  font-size: 24rpx;
  color: #E4E4E4;
}
     .goodselect {
        display: flex;
        padding: 0 12rpx;
        background: #E75329;
        color: #fff;
        border-radius: 10rpx;
        height: 50rpx;
        line-height: 50rpx;
        margin-right: 20rpx;
      }
.goodsList {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  padding: 10rpx;
  width: calc(100%);
  margin: 10rpx auto;
  background: #fff;
  border-top-left-radius: 20rpx;
  border-top-right-radius: 20rpx;

  .goods-item {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: calc((100% - 20rpx) / 2);
    margin-top: 16rpx;
    background: #f7f7f7;
    padding: 10rpx;
    border-radius: 20rpx;

    .goods-img {
      max-width: 100%;
      height: 350rpx;
    }

    .goods-title {
      margin-top: 10rpx;
      padding-left: 20rpx;
      width: 100%;
      // 移除 display: flex 相关属性
      height: 67rpx; // 增加高度以适应两行文字
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      overflow: hidden;
      text-overflow: ellipsis; // 添加省略号
      font-size: 28rpx; // 添加字体大小
      line-height: 33rpx; // 添加行高

    }

    .goods-desc {
      width: 100%;
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      margin-top: 10rpx;
      padding-left: 20rpx;
      margin-bottom: 12rpx;

      .desc {
        font-family: Source Han Sans;
        color: #E75329;
        font-family: Source Han Sans;
        font-weight: bold;
        font-size: 28rpx;
        width: 140rpx;
      }

      .share-sales {
        display: flex;
        flex-direction: row;
        justify-content: flex-end;

        .sales {
          max-width: 160rpx;
          height: 38rpx;
          font-family: Source Han Sans;
          font-size: 24rpx;
          font-weight: normal;
          line-height: normal;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;

          letter-spacing: normal;
          color: #9E9E9E;
          margin-right: 22rpx;

          display: flex;
          justify-content: center;
          align-items: flex-end;
        }

        .share {
          width: 33rpx;
          height: 33rpx;
          display: flex;
          justify-content: center;
          align-items: center;
          background: #D8D8D8;
          border-radius: 50%;
          margin-left: 10rpx;
          margin-right: 20rpx;
          margin-top: 8rpx;


          .share-img {
            width: 24rpx;
            height: 24rpx;
          }
        }
      }


    }
  }

  .goods-item:nth-child(2n-1) {
    margin-right: 10rpx;
    ;
  }

}


.bg_color {
  background-color: rgba(255, 255, 255, 0);
}

.search {
  /* #ifdef MP||H5 */
  height: 65rpx;
  /* #endif */

  /* #ifdef APP */
  height: 35rpx;
  /* #endif */


  .left {

    height: 100%;

    .region {
      font-family: PingFang SC;
      font-size: 30rpx;
      font-weight: normal;
      line-height: 30rpx;
      text-align: center;
      display: flex;
      align-items: center;
      justify-content: center;
      letter-spacing: 0.64rpx;
      width: 98rpx;


      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;

      font-variation-settings: "opsz" auto;
      color: #3D3D3D;

    }

    .img {
      width: 25rpx;
      height: 18rpx;
    }
  }

  .right {
    width: calc(100% - 30rpx - 98rpx - 20rpx - 20rpx - 20rpx);
    background-color: #fff;
    margin-right: 20rpx;
    margin-left: 20rpx;
    height: 100%;
    border: 2rpx solid #fff;

    .search-view {
      /* #ifdef MP */
      width: 320rpx;
      /* #endif */
      /* #ifndef MP */
      width: 350rpx;
      /* #endif */
      height: 100%;

      .my-input {
        color: #333;
        /* #ifdef MP||H5 */
        height: 50rpx;
        /* #endif */
        /* #ifdef APP */
        height: 30rpx;
        /* #endif */
        width: 300rpx;
        max-height: 50rpx;
        margin-left: 20rpx;

      }

      .search-icon {
        margin-left: 20rpx;
      }

    }

    .search_btn {
      background-color: #F46800;
      color: #fff;
      /* #ifdef MP||H5 */
      width: 134rpx;
      /* #endif */
      /* #ifdef APP */
      width: 94rpx;
      /* #endif */
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      border-radius: 40rpx;
      font-size: 30rpx;
    }

  }

}






.tabs {}

.blank {
  height: 50rpx;
  width: 100%;
  text-align: center;
  margin: 40rpx auto;
}

::v-deep .tabs .u-tabs {
  border-bottom: none;
  background-color: rgba(255, 255, 255, 0);
}






.category {
  width: 100%;
  height: 80rpx;
  font-family: PingFang SC;

  .itmes {
    width: 200rpx;
    height: 100%;
    font-size: 30rpx;
    font-weight: 400;
    line-height: normal;
    letter-spacing: 1rpx;
    display: flex;
    justify-content: center;
    align-items: center;
  }



}

.active {
  color: #F46800;
  ;
  border: 4rpx solid;
  border-image: radial-gradient(45% 45% at 51% 100%, #F46800 0%, rgba(71, 223, 189, 0) 100%) 4;
}

.scroll-view_H {
  white-space: nowrap;
  width: 100%;
}

.scroll-view-item_H {
  display: inline-block;
  background-color: #FFFFFF;
  min-width: 70rpx;
  padding: 0 20rpx;
  height: 60rpx;
  line-height: 60rpx;
  text-align: center;
  font-size: 36rpx;
}

.type {
  font-family: PingFang SC;
  font-size: 24rpx;
  font-weight: normal;
  color: #4F4F4F;
  border-radius: 10rpx;
  margin-right: 5rpx;
  margin-left: 5rpx;
  // padding-left:10rpx;
  // padding-right:10rpx;
  letter-spacing: 1rpx;


}

.ssactive {
  color: #F46800;
  background: #FFF8F3;
  border: solid 1rpx #F46800;
}
</style>
